<template>
  <div class="menulist">
    <el-menu
      :default-active="activeNavIndex"
      :default-openeds="activeArr"
      :unique-opened="true"
      class="el-menu-vertical-demo"
      @select="goPagesA"
      @open="handleOpen"
    >
      <div v-for="item in navbarList" :key="item.id">
        <el-submenu
          :index="item.path"
          v-if="item.children?.length > 0"
          :class="isIncludes(item.path) ? 'active' : ''"
        >
          <template slot="title">
            <!-- <i class="el-icon-location"></i> -->
            <span
              >{{ item.title
              }}<a href="javascript:;" @click.stop="goPages(item.path)"></a
            ></span>
          </template>
          <div v-for="citem in item.children" :key="citem.id">
            <el-submenu
              :index="citem.path"
              v-if="citem.children?.length > 0"
              :class="isIncludes(citem.path) ? 'active' : ''"
            >
              <template slot="title"
                >{{ citem.title
                }}<a
                  href="javascript:;"
                  @click.stop="goPages(citem.path)"
                ></a
              ></template>
              <el-menu-item
                :index="ccitem.path"
                v-for="ccitem in citem.children"
                :key="ccitem.id"
                :class="isIncludes(ccitem.path) ? 'active' : ''"
                >{{ ccitem.title
                }}<a
                  href="javascript:;"
                  @click.stop="goPages(ccitem.path)"
                ></a
              ></el-menu-item>
            </el-submenu>
            <el-menu-item
              :index="citem.path"
              v-else
              :class="isIncludes(citem.path) ? 'active' : ''"
              >{{ citem.title
              }}<a
                href="javascript:;"
                @click.stop="goPages(citem.path)"
              ></a
            ></el-menu-item>
          </div>
        </el-submenu>
        <el-menu-item
          :index="item.path"
          v-else
          :class="isIncludes(item.path) ? 'active' : ''"
        >
          <!-- <i class="el-icon-menu"></i> -->
          <span slot="title"
            >{{ item.title
            }}<a href="javascript:;" @click.stop="goPages(item.path)"></a
          ></span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapMutations,mapActions } from 'vuex';
export default {
  props: {
    navbarList: Array,
  },
  data() {
    return {
      activeNavIndex: "/",
      //子菜单展开数组
      activeArr: [],
      //选中激活样式数组
      activePathArr: [],
    };
  },
  created(){
    this.activePathArr=this.$cookies.get('activePathArr')?this.$cookies.get('activePathArr'):['/'];
  },
  methods: {
    ...mapMutations(['handleClose']),
    handleOpen(key, keyPath) {
      this.activeArr = keyPath;
    },
    async goPages(path) {
      this.handleClose()
      this.$router.push(path);
    },
    async goPagesA(key, keyPath) {
      this.handleClose()
      this.$router.push(key);
    },
    isIncludes(path){
      let is=false;
      for(let i=1;i<this.activePathArr.length;i++){
        if(this.activePathArr[i].path==path){
          is=true;
        }
      }
      return is;
    }
  },
};
</script>

<style lang="less">
.menulist {
  .el-menu {
    background-color: #0088cc !important;
    border-right: 0 !important;
    div {
      color: #fff;
      padding: 0 !important;
      font-size: 16px !important;
    }
    li {
      color: #fff;
      padding-left: 0 !important;
      font-size: 16px !important;
      > span {
        color: #fff;
        padding-left: 10px !important;
      }
    }
    li.active {
      background-color: #1a94d1;
    }
    .el-submenu {
      .el-submenu__title {
        padding-left: 10px !important;
        border-bottom: 1px solid #0075b0;
        box-sizing: border-box;
        &::after {
          content: "";
          border-left: 1px solid #0075b0;
          box-sizing: border-box;
          position: absolute;
          right: 55px;
          top: 10px;
          height: 36px;
        }
        i {
          font-size: 18px;
          color: #fff;
        }
        .el-submenu__icon-arrow {
          margin-top: -8px;
        }
      }
      ul {
        .el-submenu__title {
          padding-left: 20px !important;
          border-bottom: 1px solid #0075b0;
          box-sizing: border-box;
        }
        li.el-menu-item {
          padding-left: 20px !important;
          border-bottom: 1px solid #0075b0;
          box-sizing: border-box;
        }
      }
      .is-opened {
        .el-menu {
          background-color: #0081c2 !important;
          .is-opened {
            .el-menu {
              background-color: #007ab8 !important;
            }
          }
        }
      }
    }
    .el-submenu.active {
      background-color: #1a94d1;
    }
    .el-submenu.is-opened {
      > ul {
        > li {
          padding-left: 30px !important;
        }
      }
    }
    .el-submenu__title:hover {
      background-color: #1a94d1 !important;
    }
    .el-menu-item:focus,
    .el-menu-item:hover {
      background-color: #1a94d1 !important;
    }
    .el-menu-item.is-active {
      color: #fff;
    }
    a {
      position: absolute;
      left: 0;
      display: inline-block;
      width: 89%;
      height: 100%;
    }
  }
  > .el-menu > div > .el-menu-item {
    border-bottom: 1px solid #0075b0;
    box-sizing: border-box;
  }
}
</style>